﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>sample1</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function(){
	$("form").submit(function(){
	
		//에러 초기화
		$("p.error").remove();
		$("dl dd").removeClass("error");
		
		$(":text,textarea").filter(".validate").each(function(){
			
			//필수 항목 체크
			$(this).filter(".required").each(function(){
				if($(this).val()==""){
					$(this).parent().prepend("<p class='error'>필수항목입니다</p>");
				}
			});
			
			//number 체크
			$(this).filter(".number").each(function(){
				if(isNaN($(this).val())){
					$(this).parent().prepend("<p class='error'>숫자만 입력 가능합니다.</p>");
				}
			});
			
			//메일 어드레스 체크
			$(this).filter(".mail").each(function(){
				if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
					$(this).parent().prepend("<p class='error'>메일 어드레스 형식이 잘 못 되었습니다.</p>");
				}
			});
			
			//메일 어드레스 확인 체크
			$(this).filter(".mail_check").each(function(){
				if($(this).val() && $(this).val()!=$("input[name="+$(this).attr("name").replace(/^(.+)_check$/, "$1")+"]").val()){
					$(this).parent().prepend("<p class='error'>메일 어드레스와 내용이 잘 못되었습니다</p>");
				}
			});
			
		});
		
		//라디오 버튼 체크
		$(":radio").filter(".validate").each(function(){
			$(this).filter(".required").each(function(){
				if($(":radio[name="+$(this).attr("name")+"]:checked").size() == 0){
					$(this).parent().prepend("<p class='error'>선택해 주세요</p>");
				}
			});
		});
		
		//체크박스 체크
		$(".checkboxRequired").each(function(){
			if($(":checkbox:checked",this).size()==0){
				$(this).prepend("<p class='error'>선택해 주세요</p>");
			}
		});
		
		// 그 외 항목 체크
		$(".validate.add_text").each(function(){
			if($(this).attr("checked")==true && $("input[name="+$(this).attr("name").replace(/^(.+)$/, "$1_text")+"]").val()==""){
				$(this).prepend("<p class='error'>그 외의 항목을 입력해 주세요</p>");
			}
		});
		
		//에러일 경우 처리
		if($("p.error").size() > 0){
				$('html,body').animate({ scrollTop: $("p.error:first").offset().top-40 }, 'slow');
				
				$("p.error").parent().addClass("error");
				return false;
		}
	});
});
		</script>
		<style type="text/css">
#container{
	width:600px;
	margin:0 auto;
	padding:20px;
	background:white;
}
h1{
	margin-top:20px;
	font-size:large;
	color:#7CADB6;
}

dl dt {
	border-left:5px solid #7CADB6;
	border-bottom:1px solid #7CADB6;
	font-size:small;
	margin:0;
	padding:5px;
}
dl dt span{
	color:red;
	font-weight:bold;
}
dl dd{
	font-size:small;
	margin:0;
	padding:10px;
}
dl dd input{
	position:relative;
	z-index:2;
}
dl dd label{
	position:relative;
	padding:5px 5px 5px 25px;
	margin : 0 5px 0 -25px;
	margin-left:-25px;
	position:relative;
	z-index:1;
}
dl dd.error input , 
dl dd.error textarea , 
dl dd.error label {
	background:#FFCCCC;
}
* html dl dd.error label {
	background:none;
}
*+html dl dd.error label{
	background:none;
}
dl dd p.error{
	margin:0;
	color:red;
	font-weight:bold;
	margin-bottom:1em;
}
		</style>
	</head>
	<body style="background:darkgray">
		<div id="container">
		<h1> 문의하기</h1>
		<form action="complate.html" method="post">
		<dl>
			<dt>이름<span> ※ </span></dt>
			<dd><input type="text" name="name" size="80" class="validate required" /></dd>
			<dt>우편번호</dt>
			<dd><input type="text" name="zip1" size="4" maxlength="4" class="validate number" /> - <input type="text" name="zip2" size="3" maxlength="3" class="validate number" /></dd>
			<dt>이메일</dt>
			<dd><input type="text" value="" size="80" name="mail" class="validate mail"/></dd>
			<dt>이메일(확인)</dt>
			<dd><input type="text" value="" size="80" name="mail_check" class="validate mail mail_check"/></dd>
			<dt>성별<span> ※ </span></dt>
			<dd>
			<input type="radio" value="남자" name="gender" id="man" class="validate required" /> <label for="man">남자</label>
			<input type="radio" value="여자" name="gender" id="woman" />
			<label for="woman">여자</label>
			</dd>
			<dt>사이트 정보를 얻은 곳은 어디입니까?<span> ※ </span></dt>
			<dd class="checkboxRequired">
			<input type="checkbox" name="search" id="search" value="검색엔진" /> <label for="search">검색엔진</label>
			<input type="checkbox" name="freiend" id="freiend" value="아는 사람 소개" /> <label for="freiend">아는 사람 소개</label>
			<input type="checkbox" name="mail_magazine" id="mail_magazine" value="메일 메거진" /> <label for="mail_magazine">메일 메거진</label>
			<input type="checkbox" name="etc" value="기타" id="etc" class="validate add_text" /> <label for="etc">기타</label>
			<input type="text" name="etc_text" value="" />
			</dd>
			<dt> 문의 내용<span> ※ </span></dt> 
			<textarea id="inquiry" name="inquiry"rows="10" cols="60" class="validate required"></textarea>
			</dd>
		</dl>
		<p><input type="submit" value="송신" /></p>
		</form>

		</div>
	</body>
</html>